<template >
  <div class="index-card">
    <div class="item" @click="$router.push('/benefits')">
      <div class="box-l">
        <div class="title">Account</div>
        <div class="desc">Manage assets</div>
      </div>
      <div class="box-r">
        <img src="/account.png" alt="图片加载失败">
      </div>
    </div>
    <div class="item">
      <div class="box-l">
        <div class="title">Referral</div>
        <div class="desc">Earn coins together</div>
      </div>
      <div class="box-r">
        <img src="/yq.cd22582c.png" alt="图片加载失败">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {}
}
</script>

<style lang="scss">
.index-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: rem(15);
  width: rem(345);

  .item {
    padding: rem(11);
    width: rem(165);
    height: rem(63);
    background: #fff;
    box-shadow: rem(2) rem(4) rem(8) rgb(190 178 213 / 50%);
    border: 0rem (5) solid #f5f5f5;
    border-radius: rem(8);
    display: flex;
    align-items: center;

    .box-l {
      .title {
        font-size: rem(13);
        color: #171717;
        height: rem(20);
        font-weight: bold;
      }

      .desc {
        width: rem(110);
        font-size: rem(12);
        color: #999;
        height: rem(18);
        line-height: rem(18);
        margin-top: rem(2);
        white-space: nowrap;
      }
    }

    .box-r {
      width: rem(48);
      height: rem(48);
      margin-right: rem(-10);

      img {
        @include img;
      }
    }
  }
}
</style>
